<template>
  <div class="app">
    <!--头部组件-->
    <HelloWorld :lcheader="lcheader"  @showPopup="showPopup" />
    <!--导航-->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      text-color="black"
      active-text-color="#ff0000"
      color="white"
      router
    >
      <el-menu-item index="article">商品</el-menu-item>
      <el-menu-item index="evaluate">评价</el-menu-item>
      <el-menu-item index="merchant">商家</el-menu-item>
    </el-menu>
    <router-view></router-view>
    <!--公告-->
    <van-popup v-model="show">
      <div id="announcement">
        <div class="box">
          <h3>{{ lcheader.name }}</h3>
          <div class="imgs">
            <img src="@/assets/img/star24_on@2x.png" alt="" />
            <img src="@/assets/img/star24_on@2x.png" alt="" />
            <img src="@/assets/img/star24_on@2x.png" alt="" />
            <img src="@/assets/img/star24_on@2x.png" alt="" />
            <img src="@/assets/img/star24_off@2x.png" alt="" />
          </div>
          <div class="captionone">
            <div></div>
            <span>优惠信息</span>
            <div></div>
          </div>
          <div class="lcyh" v-for="(item, index) in lcheader.supports" :key="index">
            <div class="lcyhsmall">
              <img :src="imageobj[index]" alt="" />
              <!-- {{imageobj[index]}} -->
              <img src="@/assets/img/discount_2@2x.png" alt="" />
              <span>{{ item.description }}</span>
            </div>
          </div>
          <div class="captionone captiontwo">
            <div></div>
            <span>商家公告</span>
            <div></div>
          </div>
          <div class="paragraph">
            {{ lcheader.bulletin }}
          </div>
          <i class="el-icon-close" @click="show=!show"></i>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import HelloWorld from "../components/index/headModule";
export default {
  components: { HelloWorld },
  name: "",
  data() {
    return {
      show: false, //公告优惠
      lcheader: {}, //头部数据
      activeIndex: "article",
      imageobj: [
        "@/assets/img/decrease_1@2x.png",
        "@/assets/img/discount_2@2x.png",
        "@/assets/img/discount_2@2x.png",
        "@/assets/img/special_1@2x.png",
        "@/assets/img/special_1@2x.png",
      ],
    };
  },
  mounted() {
    this.lcgetlist();
  },
  methods: {
    //获取本地数据
    lcgetlist() {
      this.$axios.get("/json/data.json").then((res) => {
        // console.log(res.seller);
        this.lclist = res;
        this.lcheader = res.seller;
      });
    },
    showPopup() {
      this.show = true;
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.app {
  height: 100;
  overflow: hidden;
}
element.style {
  border-bottom: none;
}
.el-menu {
  width: 100%;
  height: 40px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24px;
}

//公告
.van-popup {
  width: 100%;
  height: 100%;
  background-color: rgba(7, 17, 27, 0.3);
  #announcement {
    .box {
      h3 {
        font-size: 16px;
        font-weight: 700;
        line-height: 16px;
        color: rgb(255, 255, 255);
        text-align: center;
        margin-left: 24px;
        margin-top: 64px;
        margin-bottom: 16px;
      }
      .imgs {
        display: flex;
        height: 24px;
        justify-content: center;
        margin-bottom: 28px;
        img {
          margin-left: 18px;
        }
      }
      .captionone {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
        span {
          color: white;
          font-weight: 700;
          font-size: 16px;
          margin: 0px 12px 0px 12px;
        }
        div {
          width: 112px;
          height: 2px;
          background-color: rgba(255, 255, 255, 0.2);
        }
      }
      .captiontwo {
        margin-top: 28px;
      }
      .lcyh {
        font-size: 12px;
        font-weight: 200;
        color: rgb(255, 255, 255);
        line-height: 12px;
        .lcyhsmall {
          margin-bottom: 12px;
          margin-left: 48px;
          img {
            width: 16px;
            height: 16px;
            margin: 0 6px 0 12px;
          }
        }
      }
      .paragraph {
        font-size: 12px;
        font-weight: 200;
        color: rgb(255, 255, 255);
        line-height: 24px;
        margin-left: 48px;
        margin-right: 48px;
      }
      i {
        font-size: 32px;
        color: rgba(255, 255, 255, 0.5);
        position: fixed;
        bottom: 32px;
        margin-left: 50%;
        transform: translate(-50%);
      }
    }
  }
}
</style>
